<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
  <title>添加用户</title>
  <div th:replace="common/link::header"></div>
</head>
<body>
<div class="layui-fluid">
  <div class="layui-card">
    <div class="layui-card-header">基本信息</div>
    <div class="layui-card-body">
      <div class="layui-row">
        <div class="layui-form layui-form-pane" lay-filter="sys-user-form" id="sys-user-form">
          <div class="layui-form-item">
            <label class="layui-form-label">头像</label>
            <div class="layui-input-inline">
              <div class="layui-upload">
                <input type="hidden" id="avatar" name="avatar">
                <div class="layui-upload-list">
                  <img class="layui-upload-img" onclick="fun.preview(this)" id="upload-img">
                  <p id="upload-img-text"></p>
                </div>
                <div class="layui-btn-group">
                  <button type="button" class="layui-btn layui-btn-primary" id="upload-img-btn">上传</button>
                  <button type="button" class="layui-btn layui-btn-primary" id="clear-img-btn">清除</button>
                </div>
              </div>
            </div>
          </div>
          <div class="layui-form-item">
            <div class="layui-inline">
              <label class="layui-form-label">昵称</label>
              <div class="layui-input-inline">
                <input type="text" name="nickName" lay-verify="required" placeholder="请输入昵称" class="layui-input">
              </div>
            </div>
            <div class="layui-inline">
              <label class="layui-form-label">账号</label>
              <div class="layui-input-inline">
                <input type="text" name="userName" lay-verify="required" placeholder="请输入用户名" class="layui-input">
              </div>
            </div>
          </div>
          <div class="layui-form-item" lay-filter="sex" pane>
            <label class="layui-form-label">性别</label>
            <div class="layui-input-block" id="sex"></div>
          </div>
          <div class="layui-form-item">
            <div class="layui-inline">
              <label class="layui-form-label">手机号码</label>
              <div class="layui-input-inline">
                <input type="text" name="phonenumber" lay-verify="required|phone|number" placeholder="请输入手机号码" class="layui-input">
              </div>
            </div>
            <div class="layui-inline">
              <label class="layui-form-label">用户邮箱</label>
              <div class="layui-input-inline">
                <input type="text" name="email" lay-verify="required|email" placeholder="请输入用户邮箱" class="layui-input">
              </div>
            </div>
          </div>
          <div class="layui-form-item">
            <div class="layui-inline">
              <label class="layui-form-label">部门</label>
              <div class="layui-input-inline">
                <div class="layui-row">
                  <div class="layui-col-md9">
                    <input name="deptId" type="hidden" lay-verify="required">
                    <input name="deptName" type="text" class="layui-input layui-disabled" placeholder="请选择部门" disabled>
                  </div>
                  <div class="layui-col-md3">
                    <button type="button" class="layui-btn layui-btn-primary deptWizard">选择</button>
                  </div>
                </div>
              </div>
            </div>
            <div class="layui-inline">
              <label class="layui-form-label">岗位</label>
              <div class="layui-input-inline">
                <div id="postIds" class="xm-select-demo"></div>
              </div>
            </div>
          </div>
          <div class="layui-form-item">
            <div class="layui-inline">
              <label class="layui-form-label">角色</label>
              <div class="layui-input-inline">
                <div id="roleIds" class="xm-select-demo"></div>
              </div>
            </div>
            <div class="layui-inline">
              <label class="layui-form-label">状态</label>
              <div class="layui-input-block" id="enabled"></div>
            </div>
          </div>
          <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">备注</label>
            <div class="layui-input-block">
              <textarea class="layui-textarea" name="remark" placeholder="请输入备注"></textarea>
            </div>
          </div>
          <div class="layui-form-item">
            <div class="layui-inline">
              <label class="layui-form-label">创建者</label>
              <div class="layui-input-inline">
                <input type="text" class="layui-input layui-disabled" name="createBy" disabled="disabled"/>
              </div>
            </div>
            <div class="layui-inline">
              <label class="layui-form-label">创建时间</label>
              <div class="layui-input-inline">
                <input type="text" class="layui-input layui-disabled" name="createTime" disabled="disabled"/>
              </div>
            </div>
          </div>
          <div class="layui-form-item layui-hide">
            <input type="button" lay-submit lay-filter="save-submit" id="save-submit" value="确认">
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div th:replace="common/script::footer"></div>
<script th:inline="javascript">
  layui.config({
      base: '/static/layuiadmin/'
  }).extend({
     index: 'lib/index'
  }).use(['index', 'form','crud'], function(){
    let $ = layui.$,
            crud = layui.crud,
            form = layui.form;
      form.on('submit(save-submit)', function(data) {
          $.ajax({
              type: 'POST',
              url:  ctx + '/sysUser/add',
              data: JSON.stringify(data.field),
              contentType:'application/json;charset=UTF-8',
              dataType: 'json',
              success: function(result) {
                layer.msg(result.message,{
                  offset:['50%'],
                  time: 3000
                },function() {
                  if (result.code === 200) {
                    let index = parent.layer.getFrameIndex(window.name);
                    // 关闭
                    parent.layer.close(index);
                    // 刷新
                    parent.location.reload();
                  }
                });
              }
          });
      });
      // 角色多选
      crud.initXmSelect("/sysRole/xmSelect","roleIds");
      // 岗位多选
      crud.initXmSelect("/system/sysPost/xmSelect","postIds");
      //普通图片上传
      crud.uploadImg("avatar");
      crud.setRadio("enabled","enabled","Y");
      crud.setRadio("sex","sex","0");
      // 部门向导
      $('.deptWizard').on('click', function () {
        // 树结构向导
        crud.treeWizard("/system/sysDept/treeSelect",function (result) {
          form.val('sys-user-form', {
            deptId: result.id,
            deptName: result.name
          });
        });
      });
  });
</script>
</body>
</html>